<template>
  <div>
    <div class="sign_do">
      <el-select v-model="classid" placeholder="请选择">
        <el-option label="一班" value="1"></el-option>
        <el-option label="二班" value="2"></el-option>
        <el-option label="三班" value="3"></el-option>
        <el-option label="四班" value="4"></el-option>
      </el-select>
         <el-divider></el-divider>
      <el-button type="primary" @click="dialogFormVisible = true">签到</el-button>
      <el-button type="primary" plain @click="lookSignInfo">签到查看</el-button>
      <el-button type="primary" plain>历史记录查看</el-button>

    </div>
    <div>
      <div class="sign">
       <el-dialog title="签到" :visible.sync="dialogFormVisible">
        <el-form :model="signform">
          <el-form-item label="签到时间" :label-width="formLabelWidth" autocomplete="off">
              <el-time-picker
                v-model="signform.signTime"
                :picker-options="{
                  selectableRange: '7:30:00 - 21:30:00'
                }"
                placeholder="任意时间点">
              </el-time-picker>
            
          </el-form-item>
          <el-form-item label="签到时间范围(分钟)" :label-width="formLabelWidth">
            <el-input v-model="signform.signTimeRange" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="签退时间" :label-width="formLabelWidth">
            <el-time-picker
                v-model="signform.signbackTime"
                :picker-options="{
                  selectableRange: '7:30:00 - 21:30:00'
                }"
                placeholder="任意时间点">
              </el-time-picker>
          </el-form-item>
          <el-form-item label="签退时间范围(分钟)" :label-width="formLabelWidth">
            <el-input v-model="signform.singbackTimeRange" autocomplete="off"></el-input>
          </el-form-item>
        
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="release ">确 定</el-button>
        </div>
      </el-dialog>


      </div>
      <div class="sign_show">
        <el-table 
          ref="singleTable"
          :data="signShowData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            property="date"
            label="学号"
            width="120">
          </el-table-column>
          <el-table-column
            property="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            property="address"
            label="签到时间">
          </el-table-column>
        </el-table>

      </div>
    </div>
    <div class="signhistory">
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            property="date"
            label="学号"
            width="120">
          </el-table-column>
          <el-table-column
            property="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            property="address"
            label="签到时间">
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>


<script>
import logapi from '@/api/login'
 import signApi  from '@/api/sign/sign'
import { getToken } from '../../../../utils/auth'
export default {

  data(){
    return {
      teachId:'',
      classid:'1',
       dialogFormVisible: false,

       signform:{
        
       },
       formLabelWidth:120,
       tableData:{},
       signShowData:[],
       data:''

    }
  },
  created(){
   var startData = new Date();
   var year = startData.getFullYear();
   var month = startData.getMonth()+1;
   var date = startData.getDate();
   let hh = startData.getHours();
   let mf = startData.getMinutes()<10 ? '0'+startData.getMinutes() : startData.getMinutes();
   let ss = startData.getSeconds()<10 ? '0'+startData.getSeconds() : startData.getSeconds();
   this.signform.signTime =new Date(year,month,date,hh,mf)
    this.signform. signbackTime =new Date(year,month,date,hh,mf)
    console.log("555"+this.signform.startTime)
    this.data = year + month+ date
   this.getTeacherInfo()

  },
  methods:{
    getTeacherInfo(){
      logapi.getUserName(getToken())
      .then(response=>{
        this.teachId = response.data;
        console.log("****"+this.teachId)
      })
    },
    release() {
      
      signApi.releaseSign(this.signform,this.classid,this.teachId)
      .then(response =>{

      })

    },
    lookSignInfo(){
        signApi.lookSignInfo(classid,date)
        .then(response =>{
          this.signShowData=response.date;
        })
    },
    lookSignHistory(){
        signApi.lookSignHistory(classid,date)
        .then(response =>{
          this.signShowData=response.date;
        })
    }

  }
}
</script>

